<template>
  <div>
    <text-input title="电话" v-model="phoneNum" type="number" :required="true"></text-input>
    
    <text-input title="交班位置" v-model="address" :readonly="true" :required="true"
      placeholder="请选择"
      @click.native="toMaps"
    ></text-input>

    <text-input title="班费" v-model="expense" type="number" unit="元" placeholder="面议" :max="10"></text-input>

    <div class="form-row flex-row">
      <span class="title required">班&emsp;&emsp;次：</span>
      <checker v-model="shiftType" :items="[
        { '白班': 1 },
        { '夜班': 2 },
        { '替班': 3 }
      ]"></checker>
    </div>

    <div class="form-row flex-row">
      <span class="title required">交班时间：</span>
      <div class="date flex-row flex-grow flex-around">
        <div class="begin" @click="openDateSelect('startTime')">
          <span v-placeholder:请选择="startTime"></span>
          <i class="com-jiao"></i>
        </div>
        <div style="border-bottom:none;"> - </div>
        <div class="end" @click="openDateSelect('endTime')">
          <span v-placeholder:请选择="endTime"></span>
          <i class="com-jiao"></i>
        </div>
      </div>
    </div>

    <text-input title="备注" v-model="remark"></text-input>

    <div class="theme-btn submitBtn" :class="{ disabled }" @click="submit">我要发布</div>

    <div id="qqmap"></div>
  </div>
</template>

<script>
import TextInput from '@c/form/TextInput'
import Checker from '@c/form/Checker'
import test from '@u/test.js'

export default {
  components: {
    TextInput, 
    Checker
  },

  props: ['type'],

  data (){
    return {
      phoneNum: this.$store.state.user.data.phonenum || '', 
      address: '',    // 定位地址
      location: null,  // 定位坐标
      expense: '',     // 班费  
      shiftType: 1,   //  班次
      startTime: '',
      endTime: '',
      remark: '',

      loopCheckerKey: 0,
      disabled: true
    }
  },

  beforeRouteLeave (to, from, next){
    // 离开页面清除字段确认器
    clearInterval(this.loopCheckerKey)
    next()
  },

  activated (){
    // 激活页面时开始每200毫秒确认一次各字段，正确将点亮按钮
    this.loopCheckerKey = setInterval(() => this.disabled = !this.testInput(false), 200)
  },

  watch: {
    $route (route){
      if(route.params.address){
        this.address = route.params.address
        this.location = route.params.location
      }
    }
  },

  methods: {
    openDateSelect (varName){
      this.$vux.datetime.show({
        format: 'HH:00',
        confirmText: '确认',
        cancelText: '取消',
        onConfirm: val => this[varName] = val
      })
    },

    // 前往地址选择页面（地图）
    toMaps (){
      this.$deepToView('maps', {
        params: {
          callback: (address, location) =>{
            this.$router.replace({
              name: 'index/publish',
              params: { address, location }
            })
          }
        }
      })
    },

    // 确认各字段
    testInput (toast = true){
      if(!this.phoneNum.length){
        toast && this.$alert.toast('电话/手机号码不能为空')
        return false
      }
      if(!test.phoneNum(this.phoneNum)){
        toast && this.$alert.toast('请输入正确的电话/手机号码')
        return false
      }
      if(!this.address){
        toast && this.$alert.toast('请选择交班位置')
        return false
      }
      if(!this.startTime || !this.endTime){
        toast && this.$alert.toast('请选择交班时间')
        return false
      }

      return true
    },

    submit (){
      if(this.testInput()){
        _api('seek/publish', {
          seek_type: this.type,
          shift_type: this.shiftType,
          tel: this.phoneNum,
          exchange_address: this.address,
          exchange_lat: this.location.lat,
          exchange_lon: this.location.lon,
          exchange_start_time: this.startTime,
          exchange_end_time: this.endTime,
          expense: this.expense || 0,
          remark: this.remark
        })
        .then(() =>{
          this.$alert.alert('发布成功')
          this.$router.replace({
            name: 'index/home',
            query: { reload: true }
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@sty/publish.less';
</style>